<html class="fl-android" data-screenwidth="375" style="font-size: 50px;">

<head>
    <title>今日天气</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link rel="shortcut icon" href="//www.fanli.com/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="//www.fanli.com/apple-touch-icon.png">

    <script type="text/javascript" id="J_script_attrsniffer" data-remwidth="750">
        !function(){var e,t,a,n=navigator.userAgent.toLowerCase(),o=navigator.appVersion,i=document.documentElement,r=/ip(hone|od|ad)/i.test(n),s={iphone:"iphone",ipod:"ipod",ipad:"ipad",samsung:"samsung|sm-",huawei:"huawei",meizu:"mx[0-9]+"},d=/context\:([^\s]+)/i.exec(n);for(a in r?(i.classList.add("fl-ios"),e=o.match(/OS (\d+)[_\.](?:\d+)[_\.]?(?:\d+)?/),8<=(t=parseInt(e[1],10))&&i.classList.add("fl-hairlines")):(e=o,t=parseInt(n.substr(n.indexOf("android")+8,3)),i.classList.add("fl-android"),t<6&&i.classList.add("fl-android-"+t)),s){if(s.hasOwnProperty(a)&&new RegExp("\\b"+s[a]+"\\b").test(n)){i.classList.add("fl-"+a);break}}d&&"com"==d[1]&&document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0")}(),!/f\.(51)?fanli\.com/.test(document.domain)&&document.addEventListener("DOMContentLoaded",function(e){if(-1<navigator.userAgent.toLowerCase().indexOf("fanli")){var t=document.createElement("iframe"),a=document.createAttribute("style"),n=document.createAttribute("src");a.nodeValue="display:none;width:0;height:0;",n.nodeValue="ifanli://m.51fanli.com/app/event/readystatechange?state=complete",t.setAttributeNode(a),t.setAttributeNode(n),document.body.appendChild(t),setTimeout(function(){document.body.removeChild(t)},250)}},!1),function(e,o){var i,t,r,a=o.querySelector("#J_script_attrsniffer"),n="onorientationchange" in e?"orientationchange":"resize",s=null,d=navigator.userAgent.toLowerCase(),c=/ip(hone|od|ad)/i.test(d),l=-1<d.indexOf("fanli"),u=/ipad/i.test(d);function m(){var e,t=o.documentElement,a=l&&c&&!u?window.screen.width:t.getBoundingClientRect().width,n=a/i*100;r&&"[remmaxwidth]"!==r&&n>Number(r)&&(n=Number(r)),t.setAttribute("data-screenwidth",a),t.style.fontSize=n+"px",e=parseFloat(window.getComputedStyle(t,null).getPropertyValue("font-size")),c||n==e||(e=e%1==0?e+0.5:e,t.style.fontSize=n/e*n+"px")}a&&(i=a.getAttribute("data-remwidth"),t=a.getAttribute("data-remswitch"),r=a.getAttribute("data-remmaxwidth"),"[remswitch]"!=t&&(i="[remwidth]"==i?750:Number(i),e.addEventListener(n,function(){clearTimeout(s),s=setTimeout(m,300)},!1),e.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(s),s=setTimeout(m,300))},!1),m()))}(window,document);
    </script>

</head>

<body>

    <style>html{font-size:50px}/*! normalize.css v2.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C""\201D""\2018""\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;vertical-align:middle}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}input:focus{outline:0}button,select{text-transform:none}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse}body,html{margin:0;padding:0;border:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}a,abbr,acronym,address,article,aside,blockquote,body,caption,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,iframe,img,label,legend,li,nav,object,ol,p,pre,q,section,span,table,tbody,td,tfoot,th,thead,tr,ul{margin:0;padding:0;border:0;font-size:100%;font:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button,input[readonly],input[type=button],input[type=reset],input[type=submit]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}table,td,th{vertical-align:middle}caption,td,th{text-align:left;font-weight:400}body{font:14px PingFangSC-Regular,Helvetica Neue,Helvetica,STHeiTi,sans-serif;overflow-x:hidden}::-webkit-scrollbar{display:none;width:0;height:0}::-webkit-input-placeholder{color:#ccc}a{text-decoration:none;-webkit-touch-callout:none}a:active{outline:0}a.underline:active,a.underline:hover,a.underline:link,a.underline:visited{text-decoration:underline}.arial{font-family:Helvetica,Arial,sans-serif}.bold,.pf-bold{font-family:PingFangSC-Medium;font-weight:500}.fl-android .bold,.fl-android .pf-bold{font-weight:700}.clearfix{*zoom:1}.clearfix:after,.clearfix:before{display:table;line-height:0;content:""}.clearfix:after{clear:both}.w100{display:block;width:100%;vertical-align:middle}.flex{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;display:-webkit-box;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center}.flex-1{-webkit-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;-webkit-box-flex:1}[v-cloak]{display:none}@-webkit-keyframes a{0%{opacity:0}25%{opacity:.25}50%{opacity:.5}to{opacity:1}}@keyframes a{0%{opacity:0}25%{opacity:.25}50%{opacity:.5}to{opacity:1}}.img-fadein{-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:ease;-webkit-animation-name:a;animation-name:a}[v-cloak]{visibility:hidden}.vmu-text-toast{position:fixed;z-index:3;left:0;top:50%;width:100%;margin-top:-50px;opacity:0;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation-duration:3s;animation-duration:3s;-webkit-transform:translateY(-10000px);text-align:center}.vmu-text-toast-content{display:inline-block;margin:0 5%;padding:10px 20px;background:rgba(0,0,0,.8);color:#fff;font-size:14px;line-height:18px;border-radius:3px}.vmu-text-toast-on{-webkit-animation-name:b;animation-name:b}@-webkit-keyframes b{0%{opacity:0;-webkit-transform:translateY(20px)}20%{opacity:1;-webkit-transform:translateY(0)}80%{opacity:1;-webkit-transform:translateY(0)}98%{opacity:.1;-webkit-transform:translateY(-20px)}to{opacity:0;-webkit-transform:translateY(-10000px)}}@keyframes b{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}
20%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}80%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}98%{opacity:.1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}to{opacity:0;-webkit-transform:translateY(-10000px);transform:translateY(-10000px)}}.fl-hairlines .b1px{border-width:.7px}@media(max-device-width:320px){.fl-hairlines.fl-iphone .b1px{border-width:.5px}}@supports(padding-bottom:constant(safe-area-inset-bottom)){body{padding-bottom:constant(safe-area-inset-bottom)}}@supports(padding-bottom:env(safe-area-inset-bottom)){body{padding-bottom:env(safe-area-inset-bottom)}}</style>
    <style>
        body{
            background: linear-gradient(rgb(50,103,157), rgb(127,167,207));
        }

        .header-box{
            padding: 0.2rem;
            align-items: flex-start;
            -webkit-box-align: start;
        }

        .location-box{
            font-size: 0.36rem;
            color: #fff;
        }

        .temp-now{
            line-height: 1rem;
            margin: 0.5rem 0.2rem 0.2rem;
            font-size: 1rem;
            color: #fff;
            text-align: center;
        }
        .temp-toady{
            font-size: 0.36rem;
            color: #fff;
            text-align: center;
        }
        .header-tips{
            width: 4rem;
            margin: -0.3rem;
            padding: 0.1rem;
            text-align: right;
            color: #fff;
        }
        .tips-item{
            padding: 0.05rem 0.2rem;
            background: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
        }
        .tips-item span{
            display: inline-block;
            width: 1rem;
            text-align: left;
        }

        .today-tips{
            margin: 0.5rem auto 1rem;
            line-height: 0.8rem;
            background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 75%);
            background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 75%);
            font-size: 0.26rem;
            color: #fff;
        }

        .today-tips span{
            margin: 0 0.2rem 0 0;
            padding: 0.1rem 0.2rem;
        }

        .future-title{
            line-height: 0.8rem;
            background: #29427c;
            font-size: 0.32rem;
            color: #fff;
            padding: 0 0.2rem;
            border-bottom: 1px solid rgba(255,255,255,0.5);
        }
        .future-box{
            background: linear-gradient(#29427c, rgba(255,255,255,0));
            text-align: center;
            font-size: 0.24rem;
            color: #fff;
        }
        .future-item{
            padding: 0.3rem 0;
            line-height: 0.45rem;
            font-size: 0.26rem;
            border-right: 1px solid rgba(255,255,255,0.5);
        }
        .future-pic{
            width: 1.2rem;
            height: 1.2rem;
            margin: 0.2rem auto 0;
        }

    </style>

    <div class="header-box flex">
        <div class="header-body flex-1">
            <p class="location-box J_loc">&nbsp;</p>
            <p class="temp-now J_temperature"></p>
        </div>
        <div class="header-tips J_header_tips">
            <!-- <p class="tips-item">pm2.5：<span class="J_tip_pm">114</span></p>
            <p class="tips-item">穿衣指数：<span class="J_tip_dress">较冷</span></p>
            <p class="tips-item">洗车指数：<span class="J_tip_car">较适宜</span></p>
            <p class="tips-item">感冒指数：<span class="J_tip_ill">较易发</span></p>
            <p class="tips-item">运动指数：<span class="J_tip_sport">较适宜</span></p>
            <p class="tips-item">紫外线强度指数：<span class="J_tip_ray">最弱</span></p> -->
        </div>
    </div>

    <p class="today-tips J_today_tips">
        <!-- <span>阴转多云</span>
        <span>8°-18°</span>
        <span>微风</span> -->
    </p>

    <div class="future-title">未来3天预报</div>
    <div class="future-box flex J_future_box">
        <!-- <div class="future-item flex-1">
            <p>周四 12月19日</p>
            <p class="future-pic"><img src="http://api.map.baidu.com/images/weather/night/yin.png" alt="" class="w100"></p>
            <p>晴</p>
            <p>-13~8</p>
            <p>无持续风向微风</p>
        </div>
        <div class="future-item flex-1">
            <p>周四 12月19日</p>
            <p class="future-pic"><img src="http://api.map.baidu.com/images/weather/night/yin.png" alt="" class="w100"></p>
            <p>晴</p>
            <p>-13~8</p>
            <p>无持续风向微风</p>
        </div>
        <div class="future-item flex-1">
            <p>周四 12月19日</p>
            <p class="future-pic"><img src="http://api.map.baidu.com/images/weather/night/yin.png" alt="" class="w100"></p>
            <p>晴</p>
            <p>-13~8</p>
            <p>无持续风向微风</p>
        </div> -->
    </div>

    <script src="https://kzcdn.itc.cn/res/skin/js/zepto.min.js?v=5.0"></script>

    <script>
    (function() {
        var imgs = [];

        var traceid = (function() {
            return 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16 | 0,
                    v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            }).toUpperCase();
        })();

        function __track(spm, data) {
            var sliceNo = Math.round(Math.random() * 9);
            var timestamp = +new Date;
            var parametersArr = ["traceid=" + traceid, "timestamp=" + timestamp];

            var img = new Image();
            img.onload = img.onerror = function() {
                img.onload = img.onerror = null;
            }

            imgs.push(img);

            if (spm) {
                parametersArr.push("spm=" + spm);
            }

            if (data) {
                parametersArr.push("tracedata=" + data);
            }

            img.src = "//ubt" + sliceNo + ".fanli.com/index.html?client=weather" + "&" + parametersArr.join("&");
        }

        window.__fl_ubt_track = __track;
    })();
    </script>

    <script>
        var getWeatherUrl = '//wxfl.fanli.com/h5/weather/index?jsoncallback=?';

        var params = (function(){
            var _params = {};
            location.search.replace('?', '').split('&').concat(location.hash.replace('#', '').split('&')).forEach(function (item) {
                var _item = item.split('=');
                _params[_item[0]] = decodeURIComponent(_item[1]);
            });

            return _params || {};
        })();

        var loc = params.loc;

        $('.J_loc').text(loc);

        $.getJSON(getWeatherUrl, {loc: loc}, function(res){
            if(res.code == 0){
                var _data = res.data;
                var tipsHtml = '';
                var futureHtml = '';
                var todayHtml = '';

                _data.tips.forEach(function(tip){
                    tipsHtml += '<p class="tips-item">' + tip.name + '：<span>' + tip.short + '</span></p>'
                })

                _data.futures.forEach(function(item){
                    futureHtml += '<div class="future-item flex-1">\
                                    <p>' + item.date + '</p>\
                                    <p class="future-pic"><img src="' + item.day_pic_url + '" alt="" class="w100"></p>\
                                    <p>' + item.weather + '</p>\
                                    <p>' + item.temperature + '</p>\
                                    <p>' + item.wind + '</p>\
                                </div>';
                })
                todayHtml += '<span>' + _data.today.weather + '</span><span>' + _data.today.temperature + '</span><span>' + _data.today.wind + '</span>'
                $('.J_temperature').html(_data.today.date.match(/(?=实时：)(.)+\)/g)[0].replace('实时：', '').replace(')', ''));
                $('.J_today_tips').html(todayHtml);
                $('.J_future_box').html(futureHtml);
                $('.J_header_tips').html(tipsHtml);
            }
        })

        __fl_ubt_track('weather.h5.pty-visit~std-52428');
    </script>

</body>

</html>